<script setup>
import { RouterLink } from "vue-router";
import { computed } from "@vue/reactivity";
import { cartStore } from "../store";

const cart = cartStore();

const cartList = computed(() => {
  return cart.cartList;
});
</script>

<template>
  <header>
    <nav>
      <RouterLink to="/list">电商网站示例</RouterLink>
      <RouterLink to="/cart">
        <span class="cart-count" v-if="cartList.length">
          {{ cartList.length }}
        </span>
        购物车
      </RouterLink>
    </nav>
  </header>
</template>

<style scoped>
/* style */

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: pink;
}

/* layout */

header {
  background: rgba(10, 50, 73, 0.8);
  color: white;
  padding: 0.25em;
}

header nav {
  display: flex;
  justify-content: space-between;
}

header nav a {
  font-size: 1.5em;
}

header nav :first-child {
  align-self: flex-end;
}

.cart-count {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background: #ff5500;
  color: #fff;
  font-size: 12px;
}
</style>
